<template>
	<view class="page category">
		<view class="c-header">
			<v-search content="润米超级品牌日"></v-search>
		</view>
		<view class="c-main">
			<view class="m-left">
				<scroll-view :scroll-y="true">
					<view class="l-item"
						:class="{'l-item-active': tabCurrentIndex === index}"
						@click="clickTab(index)"
						v-for="(item, index) in tabs" :key="index">
							<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="m-right">
				<scroll-view :scroll-y="true">
					<view class="sub-list-wrap">
						<view class="wrap-list">
							<view class="list-item" :key="key" v-for="(item, key) in list">
								<view class="item-pic">
									<image :src="'//s2.juancdn.com' + item.icon"></image>
								</view>
								<view class="item-name">
									<text>{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view> 
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
/* 自定义的组件 */
import vSearch from '../../components/v-search/v-search.vue'
import { category } from '../../api/categoryData.js'

export default {
	components: {
		vSearch
	},
	data() {
		return {
			tabCurrentIndex: 0,
			tabs: [],
			list: []
		}
	},
	computed: {
	},
	created() {
		this._getCategory()
	},
	methods: {
		clickTab(index) {
			this.tabCurrentIndex = index
			this.list = this.tabs[index].secondCateList
		},
		_getCategory() {
			this.tabs = category
			this.list = this.tabs[0].secondCateList
		}
	}
}
</script>

<style lang="less">
@import "./category";
.c-header {
	padding: 0 2%;
	background: #fff;
}
.m-right {
	background-color: #fff;
}
</style>
